<template>
  <div class="footer">
    <div class="footer-main">
      <div class="footer-left">
        <div class="logo-box">
          <img class="logo" src="../../../public/logo/deep_icon_logo.png" alt />
          <span class="logo-text">DeepCoin</span>
        </div>
        <div class="list">
          <span class="icon-down-text down-copy">©2019 By -景凌凯 </span>
          <span class="icon-down-text">市场有风险 投资需谨慎</span>
        </div>
      </div>
      <div class="footer-right">
        <ul class="footer-ul">
          <li class="list">
            <span class="title">平台服务</span>
            <div class="list-item">
              <router-link to="#">API接入</router-link>
            </div>
            <div class="list-item">
              <router-link to="#">平台安全</router-link>
            </div>
            <div class="list-item">
              <router-link to="#">费率标准</router-link>
            </div>
            <div class="list-item">
              <router-link to="#">上币申请</router-link>
            </div>
          </li>
          <li class="list">
            <span class="title">关于我们</span>
            <div class="list-item">
              <router-link to="#">公司简介</router-link>
            </div>
            <div class="list-item">
              <router-link to="#">诚聘英才</router-link>
            </div>
            <div class="list-item">
              <router-link to="#">联系我们</router-link>
            </div>
            <div class="list-item">
              <router-link to="#">小白菜两毛五</router-link>
            </div>
          </li>
          <li class="list">
            <span class="title">用户支持</span>
            <div class="list-item">
              <router-link to="#">问题反馈</router-link>
            </div>
            <div class="list-item">
              <router-link to="#">服务条款</router-link>
            </div>
            <div class="list-item">
              <router-link to="#">免责声明</router-link>
            </div>
            <div class="list-item">
              <router-link to="#">隐私保护</router-link>
            </div>
          </li>
          <li class="list">
            <span class="title">联系我们</span>
            <div class="icon-list">
              <a href>
                <i class="iconfont icon-Facebook"></i>
              </a>

              <a href>
                <i class="iconfont icon-ttww"></i>
              </a>
              <a href>
                <i class="iconfont icon-blog"></i>
              </a>
              <a href>
                <i class="iconfont icon-weixin"></i>
              </a>
              <a href>
                <i class="iconfont icon-weibo"></i>
              </a>
            </div>
            <div class="link">联系电话：+123 456 7897（英文服务7*24小时）</div>
            <div
              class="link"
            >18th Floor, Menara TA One 22, Jalan P. Ramlee 50250, Kuala Lumpur Malaysia</div>
          </li>
        </ul>
      </div>
    </div>
    <div class="footer-link">
      <div class="link-row">
        <span class="title">友情链接：&nbsp;</span>
        <span v-for="(item,index) in links" :key="index">
          <a :href="item.LinkUrl" class="text">{{item.LinkName}}</a>
        </span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      links: []
    };
  },

  methods: {
    /*
     * @友情链接的请求
     */
    reqBlogRoll() {
      this.$api.index.blogRoll().then(res => {
        console.log("友情链接请求回来的数据", res.data);
        if (res.data.code == 200) {
          this.links = res.data.data.blogroll;
        }
      });
    }
  },

  computed: {},

  created() {
    this.reqBlogRoll();
  },

  mounted() {}
};
</script>
<style lang="less" scoped>
.footer {
  width: 100%;
  background-color: #020f27;
  .footer-main {
    width: 1180px;
    margin: 0 auto;
    padding: 48px 0;
    display: flex;
    .footer-left {
      position: relative;
      width: 264px;
      min-height: 120px;
      .logo-box {
        display: flex;
        align-items: center;
        .logo {
          width: 35px;
          height: 35px;
        }
        .logo-text {
          font-size: 25px;
          font-weight: bold;
          margin: 0 5px;
          color: #747b88;
        }
      }
      .list {
        margin-top: 25px;
        .down-copy {
          color: rgba(248, 248, 248, 0.45);
        }
      }
      .icon-down-text {
        font-size: 12px;
        line-height: 18px;
        padding-right: 20px;
        display: inline-block;
        color: hsla(0, 0%, 100%, 0.25);
        padding-left: 3px;
      }
    }
    .footer-right {
      .footer-ul {
        display: flex;
        align-items: center;
        .list {
          min-width: 200px;
          .title {
            font-size: 12px;
            font-weight: 400;
            color: hsla(0, 0%, 100%, 0.45);
            line-height: 18px;
            padding-bottom: 16px;
            display: inline-block;
            vertical-align: top;
          }
          .list-item {
            margin-bottom: 8px;
          }
          .list-item a {
            font-size: 12px;
            font-weight: 400;
            color: hsla(0, 0%, 100%, 0.65);
            line-height: 18px;
            cursor: pointer;
            display: inline-block;
          }
          .list-item a:hover {
            color: #fff;
          }
          .icon-list {
            margin-bottom: 9px;
            .iconfont {
              font-size: 16px;
              color: #9aa8b7;
              margin-right: 17px;
              position: relative;
            }
            .iconfont:hover {
              color: #fff;
            }
          }
          .link {
            font-size: 12px;
            margin-bottom: 8px;
            font-weight: 400;
            color: hsla(0, 0%, 100%, 0.65);
            line-height: 18px;
          }
        }
      }
    }
  }
  .footer-link {
    width: 1180px;
    margin: 0 auto;
    padding: 20px 0;
    border-top: solid 1px #1c273d;
    .link-row {
      display: flex;
      line-height: 25px;
      color: hsla(0, 0%, 100%, 0.45);
      .title,
      .text {
        margin: 0 8px;
        font-size: 12px;
        line-height: 25px;
        text-align: left;
        color: hsla(0, 0%, 100%, 0.45);
        display: inline-block;
      }
    }
  }
}
</style>
